<template>
  <div class="container">
    <slot name="add-btn"></slot>
    <el-alert
      v-if="multiSelection"
      :title="`已选中${mySelects.length}条数据`"
      type="info"
      :closable="false"
      show-icon
    >
    </el-alert>
    <el-table
      ref="myTable"
      row-key="id"
      @selection-change="handleSelectionChange"
      :data="tableData"
      style="width: 100%"
      border
      header-row-class-name="header-style"
      header-cell-class-name="head-cell"
      :highlight-current-row="singleSelection"
      @current-change="handleSingleChange"
      v-loading="loading"
    >
      <el-table-column
        reserve-selection
        v-if="multiSelection"
        type="selection"
        width="55"
      ></el-table-column>
      <el-table-column
        v-for="item in columnProps"
        :key="item.dataIndex"
        :prop="item.key"
        :label="item.title"
        :width="item.width"
        header-align="center"
        :align="item.align ? item.align : 'center'"
      >
        <template slot-scope="scope">
          <template v-if="item.render">
            <span v-html="item.render(scope.row, item)"></span>
          </template>
          <template v-else>
            <slot v-if="item.slot" :name="item.key" :scope="scope"></slot>
            <span v-else>{{ scope.row[item.key] }}</span>
          </template>
        </template>
      </el-table-column>
      <el-table-column
        width="200"
        v-if="showHandle"
        label="操作"
        align="center"
        fixed="right"
      >
        <template slot-scope="scope">
          <span class="detail-btn" v-if="showDetailBtn">
            <el-link
              @click="_goDetail(scope.$index, scope.row)"
              type="primary"
              :underline="false"
            >
              详情
            </el-link>
          </span>
          <el-link
            v-if="!hideModifyBtn"
            @click="_modify(scope.$index, scope.row)"
            type="warning"
            :underline="false"
            >编辑</el-link
          >
          <el-link
            v-if="!hideDeleteBtn"
            type="danger"
            :underline="false"
            style="margin-left: 20px"
            @click="onShowDelModal(scope.row)"
            >删除</el-link
          >

          <slot name="link" :scope="scope"></slot>
        </template>
      </el-table-column>
      <div slot="empty">
        <i class="el-icon-receiving no-data"></i>
        <div class="empty-text">暂无数据</div>
      </div>
    </el-table>
    <el-pagination
      v-if="pagination"
      style="margin-top: 20px; text-align: center"
      background
      layout="total,sizes, prev, pager, next, jumper"
      :page-size="pagination.pageSize"
      :page-sizes="[10, 20, 30, 40, 50, 100]"
      :total="pagination.totalElements"
      @current-change="currentPage"
      @size-change="handleSizeChange"
      :current-page="pagination.pageIndex"
    ></el-pagination>
    <el-dialog
      :append-to-body="true"
      title="提示"
      :visible.sync="showDelModal"
      width="20%"
      @close="onCloseDelModal"
    >
      <span>是否确认删除？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="onCloseDelModal">取 消</el-button>
        <el-button type="danger" @click="handleDelete">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: {
    /**
     * columnProps属性
     * @prop {String} dataIndex
     * @prop {String} key
     * @prop {String} title
     * @prop {String} width
     * @prop {String} align
     */
    columnProps: {
      type: Array
    },
    tableData: {
      type: Array
    },
    showHandle: {
      type: Boolean,
      default: false
    },
    showDetailBtn: {
      type: Boolean,
      default: false
    },
    pagination: {
      type: Object
    },
    multiSelection: {
      type: Boolean,
      default: false
    },
    singleSelection: {
      type: Boolean,
      default: false
    },
    hideModifyBtn: {
      type: Boolean,
      default: false
    },
    hideDeleteBtn: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: false,
      visible: true,
      popVisibleArr: [],
      mySelects: [],
      showDelModal: false,
      curRow: null
    };
  },
  methods: {
    _modify(rowIndex, row) {
      this.$emit("modify", row);
    },
    _goDetail(rowIndex, row) {
      this.$emit("detail", row);
    },
    _delArticle(rowIndex, row) {
      this.$emit("delete", row);
    },
    currentPage(currentIndex) {
      const _this = this;
      this.loading = true;
      this.$emit("currentPage", currentIndex);
      _this.loading = false;
      // setTimeout(()=>{
      //   _this.loading=false
      // },1000)
    },
    handleSizeChange(size) {
      const _this = this;
      this.loading = true;
      this.$emit("sizeChange", size);
      _this.loading = false;
      // setTimeout(()=>{
      //   _this.loading=false
      // },1000)
    },
    /**
     *设置删除框的显隐
     */
    setPopVisible(rowIndex) {
      let _this = this;
      _this.popVisibleArr.forEach((item, index) => {
        index == rowIndex
          ? _this.$set(
              _this.popVisibleArr,
              rowIndex,
              !_this.popVisibleArr[rowIndex]
            )
          : _this.$set(_this.popVisibleArr, index, false);
      });
    },
    /**
     *点击删除按钮
     */
    handleDelete() {
      if (this.curRow) {
        this.$emit("delete", this.curRow);
        this.showDelModal = false;
      }
    },
    //多选
    handleSelectionChange(val) {
      this.mySelects = val;
      this.$emit("selectionChange", val);
    },
    //单选
    handleSingleChange(val) {
      this.$emit("singleChange", val);
    },
    //展示删除框
    onShowDelModal(row) {
      this.showDelModal = true;
      this.curRow = row;
    },
    //关闭删除框
    onCloseDelModal(row) {
      this.showDelModal = false;
      this.curRow = null;
    }
  },

  watch: {
    tableData(newArr, oldArr) {
      newArr.forEach(item => [this.popVisibleArr.push(false)]);
    }
  }
};
</script>
<style lang="scss" scoped>
.no-data {
  font-size: 45px;
  margin-top: 20px;
  color: #ccc;
}
.empty-text {
  font-size: 12px;
  color: #888;
  margin-top: -30px;
}
.header-style {
  font-size: 10px;
}
.head-cell {
  width: 10px;
}
.detail-btn {
  margin-right: 20px;
}
</style>
